<template>
  <div :class="{'hidden':!selfShow}" id="bg" >
    <div id="mg" style="width: 750px;padding-bottom: 40px;margin: 0px auto;background:#FFFFFF ;border-radius: 10px">
    <div class="top">
      <div style="display: flex;flex-direction: row">
        <h2>订单信息</h2>
        <span class=" s1 el-icon-close" @click="onClose"></span>
      </div>
    </div>
    <div class="mains">
      <info :myData="myData"></info>
      <Total :myData="myData"></Total>
      <div class="d1" style="margin-top: 28px;margin-left: 470px" v-if="myIndex==1">
        <button class="btn3" @click="cancel(myData.orderNo)">取消订单</button>
        <span
          style="color:#9B9B9B ;font-size:16px;margin-left: 15px;margin-top: 30px;font-weight: bolder;letter-spacing: 2px">订单待支付</span>
      </div>
      <div class="d1" style="margin-top: 35px;margin-left: 120px">
        <span
          style="color:#9B9B9B ;font-size:14px;margin-left: 465px;margin-top: 30px;font-weight: bolder;letter-spacing: 2px;font-size: 16px"
          v-if="myIndex==2">订单已被取消</span>
      </div>
      <div class="d1" style="margin-top: 35px;margin-left: 120px">
        <span
          style="color:#9B9B9B ;font-size:16px;margin-left: 475px;margin-top: 30px;font-weight: bolder;letter-spacing: 2px"
          v-if="myIndex==0">订单已完成</span>
      </div>
    </div>
      <div style="margin-left: 25px;margin-top: 8px" v-if="myIndex==1">
        <span style="font-size: 15px;color:#515151">说明：当图书三审通过后自动扣费</span>
      </div>
  </div>
  </div>
</template>

<script>
  import Info from './Info'
  import Total from './Total'
  import mxr from '../../common/encryption'
  import bus from '../../assets/eventBus'
  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let userId

  export default {
    name: "MySlot",
    components: {Info, Total},
    props: ['myData','resourceTotal','showCommonText','showThirdText','showCustomText'],
    data() {
      return {
        selfShow: false,
        myIndex: 0
      }
    },
    created() {
      userId = this.$route.query.userId
    },
    mounted() {
      /**
       * 打开订单弹窗
       */
      let that = this
      bus.$on('showClause', function (id) {
        that.myIndex = id
        that.selfShow = true
      })
    },
    methods: {
      /**
       * 关闭弹窗方法
       */
      onClose() {
        this.selfShow = false
      },

      /**
       * 取消订单
       */
      cancel(id) {
        let that=this
        let json = {
          userId: userId,
          status: this.myIndex
        }
        console.log(this.myIndex)
        console.log(id)
        console.log(userId)

        ajax.post({
          url: api.orders.routeName + api.orders.children.cancel + id,
          data: json,
          success: function () {
            that.$message.success('取消订单成功')
            that.myIndex=2
            that.$emit("listenChild2")
          }
        })

        //监听父组件方法
        // this.$emit("listenChild2")
      }
    }
  }
</script>

<style scoped>


  h2 {
    font-size: 30px;
    margin-left: 310px;
    color: white;
    letter-spacing: 3px;
  }

  .s1 {
    font-size: 26px;
    margin-left: 250px;
    color: white;
    margin-top: 5px;
  }

  .s1:hover {
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    top: 0;
    z-index: 999;
    overflow-y: auto;
  }

  .btn3 {
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 3px;
    background: white;
    font-size: 14px;
    color: #F5A623;

  }

  .btn4 {
    width: 179px;
    height: 40px;
    background: #4A90E2;
    border: none;
    border-radius: 3px;
    color: white;
    font-size: 14px;
  }

  .btn3:hover {
    cursor: pointer;
  }

  .btn4:hover {
    cursor: pointer;
  }

  .top {
    height: 55px;
    background: #4381E6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-top: 25px;
  }

  ::-webkit-scrollbar {
    width: 2px;
  }
</style>
